<template>
	<div>
		<Echart :options="options" id="bar_b" ref="bar_b" width="100%" height="170px"></Echart>
	</div>
</template>

<script>
	import Echart from '@/common/echart'
	export default {
		data() {
			return {
				options: {},
			};
		},
		components: {
			Echart,
		},
		props: {
			cdata: {
				type: Object,
				default: () => ({})
			},
		},
		watch: {
			cdata: {
				handler(newData) {
					this.options = {
						color: ['#ff6825'],
						tooltip: {},
						grid: {
							x: 0,
							y: 20,
							x2: 30,
							y2: 10,
							containLabel: true,
						},
						xAxis: [{
							type: 'category',
							data: ['0-3次', '4-6次', '7-9次', '大于9次'],
							axisTick: {
								alignWithLabel: true,
							},
							nameTextStyle: {
								color: '#82b0ec',
							},
							axisLine: {
								lineStyle: {
									color: '#82b0ec',
								},
							},
							axisLabel: {
								color: '#ffffff',
								interval: 0,
								fontSize: 10,
							},

						}, ],
						yAxis: [{
							type: 'value',
							axisLabel: {
								textStyle: {
									color: '#ffffff',
								},
								fontSize: 10,
								formatter: '{value}天',
							},
							splitLine: {
								lineStyle: {
									color: '#82b0ec',
								},
							},
							axisLine: {
								show: false,
							},
						}, ],
						series: [
							{
								type: 'bar',
								itemStyle: {
									normal: {
										opacity: 1,
									},
								},
								barWidth: '10',
								data: [],
								label: {
									normal: {
										show: true,
										position: 'top',
										formatter: '{c}天',
										textStyle: {
											fontSize: 10,
											color: '#ffffff',
											fontSize: 10,
										}
									},
								},
								markLine: {
									silent: true,
									label: {
										position: 'middle',
										formatter: '{b}',
										color: '#ffffff',
										fontSize: 10,
									},
									data: [{
										name: '平均值',
										yAxis: 40,
										lineStyle: {
											color: '#ff6825',
										},
										itemStyle: {
											color: '#ff6825',
										},
										label: {
											position: 'end',
											formatter: '{c}天',
										},
									}, ],
								},
							},
							{
								type: 'effectScatter',
								silent: true,
								tooltip: {
									show: false,
								},
								zlevel: 3,
								symbolSize: 10,
								showEffectOn: 'render',
								rippleEffect: {
									brushType: 'stroke',
									color: '#4c9bfd',
									scale: 5,
								},
								itemStyle: {
									color: '#4c9bfd',
								},
								hoverAnimation: true,
								data: [],
							},
						],
					};
				},
				immediate: true,
				deep: true
			}
		},
		methods: {

		}
	};
</script>

<style scoped>
</style>